<template>
  <div class="cityList">
    <van-index-bar :sticky="false" :index-list="sideIndexList">
      <div v-for="item in cityList" :key="item.id">
        <van-index-anchor
          :index="item.index"
          :highlight-color="highlightColor"
          :sticky-offset-top="46"
        />
        <van-cell
          v-for="cell in item.city"
          :key="cell.regionCode"
          :title="cell.regionName"
          @click="citySel(cell)"
        />
      </div>
    </van-index-bar>
  </div>
</template>

<script>
export default {
  props: { indexList: Array },
  name: "CityList",
  components: {},
  data() {
    return {
      highlightColor: "#DC4630",
      cityList: [],
      sideIndexList: []
    };
  },
  computed: {},
  created() {},
  watch: {
    indexList: {
      handler: function(val) {
        this.cityList = val;
        this.sideIndexList = []
        val.forEach(e => {
          this.sideIndexList.push(e.index);
        });
      },
      deep: true
    }
  },
  mounted() {
    this.cityList = this.indexList;
    this.indexList.forEach(e => {
      this.sideIndexList.push(e.index);
    });
  },
  methods: {
    citySel(data) {
      this.$emit("citySel", data);
    }
  }
};
</script>

<style lang="scss" scoped>
.cityList {
  width: 100%;
  height: 100%;
  background: #ffffff;
}
</style>
